<template>
	<view>
		<view class="u-p-50">
			<view class="u-font-40 c-font-bold">问题上报</view>
			<view class="u-m-t-20">为推动问题的合适解决，请您的留言保持真实、客观、明确</view>
		</view>
		<view class="u-p-50" style="padding-top: 0 !important;">
			<u-form :model="form" ref="uForm">
				<u-cell-group :border="false">
					<picker @change="changeCategory" range-key="title" :value="category_id" :range="category_list">
						<u-cell-item title="上报类型" :border="false" :arrow="true"
							:value="category_index === null ? '请选择上报类型' :category_list[category_index]['title'] "></u-cell-item>
					</picker>
					<picker v-if="category_index !== null && category_list[category_index]['child'].length > 0"
						range-key="title" @change="changeGroup" :value="group_index"
						:range="category_list[category_index]['child']">
						<u-cell-item title="二级类型" :border="false" :arrow="true"
							:value="group_index === null ? '请选择二级类型' : category_list[category_index]['child'][group_index]['title']"></u-cell-item>
					</picker>
					<!-- <picker v-if="category_index !== null && category_list[category_index]['group_list'].length > 0"
						range-key="name" @change="changeGroup" :value="group_index"
						:range="category_list[category_index]['group_list']">
						<u-cell-item title="部门" :border="false" :arrow="true"
							:value="group_index === null ? '请先选择部门' : category_list[category_index]['group_list'][group_index]['name']"></u-cell-item>
					</picker> -->
				</u-cell-group>
				<!-- <u-form-item label="分类" required label-position="top" prop="category_id">
					<u-radio-group shape="square" v-model="category_index" @change="categoryChange" name="category">
						<u-radio v-for="(item, index) in category_list" :key="index" :name="index">
							{{item.title}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="部门" v-if="category_index !== null" required label-position="top" prop="group_id">
					<u-radio-group shape="square" v-model="form.group_id">
						<u-radio v-for="(item, index) in  category_list[category_index]['group_list']" :key="index"
							:name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item> -->
				<!-- <u-form-item label="事件标签" required label-position="top" prop="labels">
					<u-radio-group shape="square" v-model="form.labels">
						<u-radio v-for="(item, index) in config.labels" :key="index" :name="item">
							{{item}}
						</u-radio>
					</u-radio-group>
				</u-form-item> -->
				<u-form-item label="发生地点" required label-position="top" prop="address">
					<u-cell-item class="u-p-0" :border-bottom="false" icon="map-fill"
						:title="form.address ? form.address :'点击选择地点'" @click="chooseDizhi" value=""></u-cell-item>
				</u-form-item>
				<u-form-item label="问题描述" required label-position="top" prop="content">
					<u-input v-model="form.content" maxlength="1000" type="textarea" />
				</u-form-item>
				<u-form-item label="拍摄问题照片" required label-position="top" prop="images">
					<u-upload ref="uUpload" :action="config.upload.uploadurl" :file-list="imageList" :header="header"
						:form-data="formdata" @on-uploaded="successUpload" @on-error="errorUpload"
						@on-remove="removeUpload" :max-count="9"></u-upload>
				</u-form-item>
				 <!-- v-if="config.video_open" -->
				<u-form-item label="拍摄视频" label-position="top" prop="video">
					<view class="video">
						<view v-if="form.video.length == 0" class="video-btn" @click="uploadVideo">
							<u-icon name="plus" color="#606266" size="40"></u-icon>
						</view>
						<view v-else class="video-content">
							<video :src="form.video" controls></video>
							<view class="delete" @click="deleteVideo"><u-icon name="close" color="#fff"
									size="20"></u-icon></view>
						</view>

					</view>
				</u-form-item>
				<u-cell-item class="u-p-l-0 u-p-r-0" hover-class="none" icon="eye" :arrow="false" title="是否公开">
					<u-switch slot="right-icon" size="40" v-model="form.isopen"></u-switch>
				</u-cell-item>
				<view class="u-p-t-50 u-p-b-50">
					<u-button hover-class="none" type="success" shape="circle" :ripple="true" @click="submit">提交</u-button>
				</view>
			</u-form>
		</view>
		<TabBar :current-page="1" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				config: [],
				category_list: [],
				category_index: null,
				group_index: null,
				form: {
					content: '',
					category_id: '',
					group_id: "",
					name: "",
					address: '',
					lat: 0,
					lng: 0,
					images: null,
					isopen: false,
					video: ''
				},

				imageList: [],
				header: {},
				formdata: {},
				rules: {
					content: [{
						required: true,
						message: '请输入问题描述',
						trigger: 'blur,change'
					}, {
						min: 3,
						max: 300,
						message: '事件描述需3~1000个字符',
						trigger: 'blur,change'
					}],
					"category_index": [{
						required: true,
						type: "number",
						message: '请选择上报类型',
						trigger: 'blur,change'
					}],
					"group_id": [{
						required: true,
						type: "number",
						message: '请选择二级类型',
						trigger: 'blur,change'
					}],
					address: [{
						required: true,
						message: '请选择地理位置',
						trigger: 'blur,change'
					}],
					images: [{
						required: true,
						message: '请上传图片',
						trigger: 'blur,change'
					}]
				},
			};
		},
		onLoad() {
			this.getPageData();
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.header = {
				token: this.vuex_token || '',
				uid: this.vuex_user.id || 0
			}
		},
		methods: {
			async getPageData(cb) {
				let res = await this.$u.api.getPageData({
					page: "reportSubmit",
				});
				this.config = res.data.config;
				// this.category_list = res.data.category_list;
				let isObj = this.$u.test.object(this.config.upload.multipart)
				if (isObj) {
					this.formdata = this.config.upload.multipart;
				}
				typeof cb == 'function' && cb();
				this.cateList()
			},
			async cateList(cb) {
				let res = await this.$u.api.cateList({
					type: 1
				});
				this.category_list = res.data;
			},
			changeCategory(e) {
				this.category_index = e.detail.value
				this.form.category_id = this.category_list[this.category_index]['id'];
				this.form.group_id = "";
				this.group_index = null
			},
			changeGroup(e) {
				this.group_index = e.detail.value
				this.form.group_id = this.category_list[this.category_index]['child'][this.group_index]['id'];
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uUpload.upload();
						this.$u.api.submitReport(this.form).then(res => {
							this.$u.toast(res.msg);
							if (res.code) {
								setTimeout(() => {
									this.$u.route({
										type: 'redirectTo',
										url: '/pages/user/report/list'
									})
								}, 1500);
							}
						});
					}
				});
			},
			chooseDizhi() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form['address_name'] = res.name;
						that.form['address'] = res.address;
						that.form['lat'] = res.latitude;
						that.form['lng'] = res.longitude;
					}
				})
			},
			successUpload(e) {
				this.uploadChanges(e)
			},
			removeUpload(index, lists, name) {
				this.uploadChanges(lists)
			},
			errorUpload(e) {
				this.$u.toast('上传失败了！');
			},
			uploadChanges(e) {
				let urls = [];
				e.map(item => {
					//编辑时，已存在的，response不存在
					if (!item.response) {
						urls.push(item.url)
					} else if (item.response.code) {
						urls.push(item.response.data.url);
					}
				});
				let value = urls.join(',');
				this.form.images = value;
			},
			uploadVideo() {
				let that = this;
				// 选择视频文件
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						// 上传视频文件
						console.log(res)
						uni.uploadFile({
							header: that.header,
							url: that.config.upload.uploadurl,
							filePath: res.tempFilePath,
							name: 'file',
							success: function(upRes) {
								// 上传成功后的处理逻辑
								console.log(upRes)
								let upJson = JSON.parse(upRes.data);
								if (upJson.code != 1) {
									uni.showToast({
										title: upJson.msg,
										icon: "none"
									})
									return;
								} else {
									that.form.video = upJson.data.fullurl;
								}
							},
							fail: function(error) {
								console.log('上传视频失败！')
							}
						});
					},
					fail: function(error) {
						console.log('选择视频失败！')
					}
				});
			},
			deleteVideo() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除此视频？',
					success: function(res) {
						if (res.confirm) {
							that.form.video = "";
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.banner {
		background-color: #3CBDD0;
		color: #fff;
		line-height: 2;
	}

	.textarea {
		width: 100%;
		background-color: #f7f8fa;
		border-radius: 30rpx;
		padding: 30rpx;
	}

	.textarea textarea {
		height: 100px;
	}

	.label-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.label {
		border: 1rpx solid #E2AB56;
		color: #E2AB56;
		border-radius: 10rpx;
		padding: 2px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	.label.active {
		background-color: #E2AB56;
		color: #ffffff
	}

	.oper {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.u-cell {
		padding: 30rpx 50rpx;
	}

	.oper button {
		width: calc(50% - 15rpx);
		margin: 0;
	}

	.video {
		width: 200rpx;
		height: 200rpx;
		background-color: #f4f5f6;
		border-radius: 10rpx;
		margin: 10rpx;
		overflow: hidden;

		.video-btn {
			width: 200rpx;
			height: 200rpx;

			display: flex;
			align-items: center;
			justify-content: center;
		}

		.video-content {
			width: 200rpx;
			height: 200rpx;
			position: relative;

			video {
				width: 200rpx;
				height: 200rpx;
			}

			.delete {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fa3534;
			}
		}

	}
</style>